<template>
  <div id="container">
    <div id="box">
      <div id="logo">
        <h1>Panda</h1>
      </div>
      <div id="account">
        <span>账号</span>
        <el-input
          id="account_input"
          placeholder="请输入账号"
          v-model="loginForm.account"
          clearable
        >
        </el-input>
      </div>
      <div id="password">
        <span>密码</span>
        <el-input
          id="password_input"
          placeholder="请输入密码"
          v-model="loginForm.password"
          show-password
          clearable
        >
        </el-input>
      </div>
      <el-button id="submit" type="primary" round @click="submit"
        >登录</el-button
      >
      <!-- <el-button type="primary" round @click="submit">登录</el-button> -->
    </div>
  </div>
</template>

<script>
// import { login } from "@/api/common";
// import $http from "@/api/request";
export default {
  name: "LoginView",
  data() {
    return {
      loginForm: {
        account: "",
        password: "",
      },
    };
  },
  methods: {
    submit() {
      console.log(this.loginForm.account);
      // console.log("登录~");
      this.$store
        .dispatch("login", this.loginForm)
        .then(() => {
          // 登录成功路由到首页
          this.$router.push({ path: this.redirect || "/" }).catch((err) => {
            err;
          });
          console.log("当前路由", this.$route);
        })
        .catch(() => {
          // 登录失败可以做验证图片请求
        });
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 73%;
}
.el-alert {
  float: left;
  left: 42%;
  top: 25%;
  width: 15%;
  margin: 0 auto;
  z-index: 1000;
}

#submit {
  position: absolute;
  top: 75%;
  left: 37%;
  width: 100px;
}

#tip_button {
  position: absolute;
  bottom: 10%;
  left: 40%;
}

#container {
  overflow: hidden;
  height: 100%;
  background-color: skyblue;
}

#box {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 330px;
  margin: 120px auto;
  background-color: rgba(0, 0, 0, 0.3);
}

#logo {
  text-align: center;
}

#account {
  position: absolute;
  top: 33%;
  width: 100%;
}

#password {
  position: absolute;
  top: 53%;
  width: 100%;
}

#account span,
#password span {
  display: inline-block;
  margin: 0 20px;
}
</style>